import React, { Component } from 'react'

export default class Footer extends Component {
  allCheck = (e) => {
    this.props.allCheck(e.target.checked)
  }
  render() {
    const { item,clearComplete } = this.props
    // reduce 方法
    let total = item.reduce((pre,item) => { return pre + (item.check?1:0) },0)
    // reduce 方法说明
    /* 
      用于统计
      pre：初始的值 类似于声明了 一个 pre 变量 后边的0 就是他的初始值
      item：接收的值
    */
    console.log(total);
    let tem = item.filter(i=>i.check)
    return (
      <div className="todo-footer">
        <label>
          <input type="checkbox" onChange={(e) => { this.allCheck(e) }} checked={total===item.length&&item.length>0?true:false}/>
        </label>
        <span>
          <span>已完成{tem.length}</span> / 全部{item.length}
        </span>
        <button className="btn btn-danger" onClick={clearComplete}>清除已完成任务</button>
      </div>
    )
  }
}
